<template>
	<view class="application">
		<!-- <view class="applications">
			<u-text :text="$appletName" size="36rpx" bold color="#3D3D3D" margin="0 0 0 20rpx" />
		</view> -->
		<view class="flex_wrap row_center"> <!-- v-if="meetDetail.picture" -->
			<view>
				<u-image
					width="690rpx"
				    height="394rpx"
				    :src="metting.picture"
				    mode="aspectFill"
				    radius="12rpx"
				/>
				<u-gap height="28rpx" />
			</view>
		</view>
		<view class="application_detail">
			<view class="application_detail_title">
				<u-icon
					name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/ffe5ad7e6efd492bb6f6398fb7286256.png"
					size="48rpx" />
				<!-- <u-text :text="metting.theme || '-'" size="38rpx" bold color="#3D3D3D" margin="0 0 0 20rpx"/> -->
				<text class="application_detail_title_text">{{
                    metting.theme || "-"
                }}</text>
			</view>
			<view class="application_detail_time">
				<view class="">
					<u-text bold :text="$u.timeFormat(metting.startTime, 'hh:MM')" size="48rpx" color="#333"
						lineHeight="80rpx" />
					<u-text color="#333" size="32rpx" :text="$u.timeFormat(metting.startTime, 'yyyy/mm/dd')" />
				</view>
				<u-image src="/static/img/conference/iconline.png" width="128rpx" height="14rpx" mode="widthFix" />
				<view class="">
					<u-text bold :text="$u.timeFormat(metting.endTime, 'hh:MM')" size="48rpx" color="#333" align="right"
						lineHeight="80rpx" />
					<u-text color="#333" size="32rpx" :text="$u.timeFormat(metting.endTime, 'yyyy/mm/dd')" />
				</view>
			</view>
			<view class="application_detail_meeting">
				<!-- <view class="application_detail_meeting_address">
					<text class="application_detail_meeting_address_left">会议编号</text>
					<text class="application_detail_meeting_address_right">{{
                        metting.meetNum
                    }}</text>
				</view>
				<view class="application_detail_meeting_address">
					<text class="application_detail_meeting_address_left">主办</text>
					<text class="application_detail_meeting_address_right">{{
                        metting.submitManName
                    }}</text>
				</view> -->
				<view class="application_detail_meeting_address">
					<text class="application_detail_meeting_address_left">地点</text>
					<text class="application_detail_meeting_address_right">{{
                        metting.addressName
                    }}</text>
				</view>
			</view>
			<view class="application_detail_btn" v-if="!metting.haveSignedIn" @click="signIn">报名会议</view>
			<u-text v-if="metting.haveSignedIn" align="center" text="已报名" size="36rpx" space="10rpx" color="#000"
				width="48rpx" height="48rpx"
				prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/4c08432224cc4ce0a2cc467dfdca5638.png"
				:iconStyle="iconStyle" margin="0 0 28rpx 0" />
			<button class="application_detail_btns" open-type="share">
				分享会议
			</button>
		</view>
	</view>
</template>

<script>
	import getphonenumber from "@/components/getphonenumber/getphonenumber.vue";
	import {
		customerSignUp,
		getMeetingWithMeetId
	} from "@/api/sign_in.js";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				iconStyle: {
					width: "48rpx",
					height: "48rpx",
					marginRight: "20rpx",
				},
				metting: {},
			};
		},
		computed: {
			...mapGetters(["isLogin", "phone"]),
		},
		components: {
			getphonenumber,
		},
		onLoad(options) {
			console.log(options,'options>')
			this.meetId = options.meetId;
			// this.salesmanId = options.salesmanId;
			var pages = getCurrentPages(); // 获取栈实例
			console.log(pages,'pages>>>')
			if (pages.length === 1) {
			    let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
			    let currentPage = pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
				console.log(currentRoute,'currentRoute>>>',currentPage)
			    uni.setStorageSync("loginBackUrl", currentPage);
			}
			if (!this.isLogin) return uni.navigateTo({ url: "/pages/user/phone/indexApp" })
			this.getMeetingDetail(this.meetId);
		},
		methods: {
			async getMeetingDetail(meetId) {
				//会议详情
				const res = await getMeetingWithMeetId(meetId);
				console.log(res,'res??')
				this.metting = res.data;
				this.meetId = res.data.id;
				this.salesmanId = res.data.submitManId
			},
			signIn() {
				const that = this;
				const params = {
					meetId: that.meetId,
					salesmanId: that.salesmanId,
				};
				customerSignUp(params)
					.then((res) => {
						if (res.code === 200) {
							uni.$u.sleep(200).then(() => {
								uni.$u.toast("报名成功!", 3000);
							});
						} else {
							this.tips(res.msg, "error");
						}
					})
					.catch((error) => {
						that.signLoading = false;
					});
			},
			//发送给朋友
			onShareAppMessage(res) {
				return {
					title: "HI!我向您一个会议",
					path: "/pages_signin/userCheckin/index?meetId=" +
						this.meetId +
						"&salesmanId=" +
						this.salesmanId,
				};
			},
		},
	};
</script>

<style scoped lang="scss">
	.application {
		background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/21c9b4655b434226a7a47640ffd7adaf.png");
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		padding-top: 28rpx;
	}

	.applications {
		padding: 0 0 72rpx 28rpx;
		display: flex;
	}

	.application_detail {
		// height: 894rpx;
		padding-bottom: 46rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(179, 191, 219, 0.5);
		border-radius: 20rpx;
		margin: 0 46rpx;

		&_title {
			padding: 44rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			&_text {
				font-size: 38rpx;
				font-weight: bold;
				margin-left: 20rpx;
				color: #3d3d3d;
			}
		}

		&_time {
			padding: 0 48rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid rgba(216, 216, 216, 0.5);
		}

		&_meeting {
			color: #333333;
			padding: 36rpx 36rpx 100rpx 48rpx;

			&_address {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				&_left {
					font-size: 28rpx;
					color: #666;
					display: block;
				}

				&_right {
					width: 400rpx;
					font-size: 26rpx;
					color: #333;
					display: block;
					font-weight: bold;
					text-align: right;
				}
			}
		}

		&_btn {
			margin: 0 auto 26rpx;
			width: 538rpx;
			height: 88rpx;
			background: #588bf3;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 88rpx;
		}

		&_btns {
			width: 538rpx;
			height: 88rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 0 auto;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			background-color: #fff;
			line-height: 88rpx;
			border: 2rpx solid #d9d9d9;
		}
	}
</style>
